<template>
    <div class="login f14">
        <HeadBg></HeadBg>
        <div class="box ">
            <div class="item phone">
                <img src="@/assets/login/phone.png">
                <input type="tel" placeholder="手机号码" maxlength="11" v-model.trim="phone">
            </div>
            <div class="item password">
                <img src="@/assets/login/password.png">
                <input type="password" placeholder="密码" v-model.trim="password">
            </div>
            <div class="code">
                验证码登录
            </div>
            <div @click="loginHandle">
                <MyButton title="登录"></MyButton>
            </div>
        </div>
        <div class="change">
            <div class="item f14" @click="registerView(1)">忘记密码?</div>
            <div class="item f14" @click="registerView(0)">现在注册></div>
        </div>
    </div>
</template>
<script>
import Button from '@/components/Login/Button.vue'
import HeadBg from '@/components/Login/HeadBg.vue'
export default {
    name: "LoginView",
    components: {
        MyButton: Button,
        HeadBg
    },
    data() {
        return {
            phone: "",
            password: "",
        }
    },
    methods: {
        checkPhone(status = true) {
            const phoneReg = /^1[3-9][0-9]{9}$/
            const flag = phoneReg.test(this.phone);
            if (this.phone.length < 11 || !flag) {
                this.$toast("手机号错误");
                status = false;
            }
            return status;
        },
        loginHandle() {
            if (!this.checkPhone()) return;
            if (!this.password)
                return this.$toast("密码不能为空");
            const data = {
                mobile: this.phone,
                pwd: this.password,
            }
            this.$sendPost("Auth/login", data)
                .then(res => {
                    this.$toast(res.data.msg)
                    if (res.data.status === 200) {
                        const { token, username } = res.data.data;
                        localStorage.setItem("token", token);
                        localStorage.setItem("username", username);
                        this.$router.back();
                    }
                })
        },
        registerView(index) {
            this.$router.push({ name: "register", query: { "forget": index } })
        }
    }
}
</script>
<style lang="scss" scoped>
.login {
    width: 100vw;
    min-height: 100vh;

    img {
        width: 100%;
    }

    .box {
        width: 250px;
        display: flex;
        flex-direction: column;
        margin: 70px auto 0;

        .item {
            display: flex;
            background-color: #f7f7f7;
            height: 50px;
            border-radius: 5px;
            // overflow: hidden;

            img {
                object-fit: contain;
                margin: 0 20px;
            }

            input {
                flex-basis: 70%;
                height: 100%;
                outline: 0;
                border: 0;
                background-color: transparent;
            }
        }

        .phone {
            margin-bottom: 20px;

            img {
                width: 15px;
            }
        }

        .password {
            img {
                width: 20px;
            }
        }

        .code {
            height: 50px;
            line-height: 50px;
            text-align: right;
        }

        .btn {
            height: 50px;
            border-radius: 10px;
            background-color: #e50012;
            color: white;
            line-height: 50px;
            text-align: center;
        }
    }

    .change {
        width: 250px;
        display: flex;
        flex-direction: row;
        margin: 70px auto 0;

        .item {
            width: 50%;
            text-align: center;
            color: #707070;
            padding: 5px;

            &:nth-of-type(1) {
                border-right: 1px solid #707070;
            }
        }
    }
}
</style>